<template>
  <el-dialog
    title="数据权限"
    width="400px"
    top="10vh"
    destroy-on-close
    :close-on-click-modal="false"
    :visible="dialogVisible"
    class="add-person-dialog"
    append-to-body
    @close="close"
  >
    <el-card shadow="never" class="dialog-page-full left-wrapper">
      <div class="left-top">
        <el-input v-model="deptName" placeholder="请输入部门名称">
          <el-button slot="append" icon="el-icon-search" @click="doSearch" />
        </el-input>
      </div>

      <el-scrollbar class="data-access-scrollbar">
        <div v-loading="wrapperLoading" class="p10">
          <el-tree
            v-if="dialogVisible"
            ref="tree"
            :data="treeData"
            node-key="id"
            lazy
            :default-checked-keys="dataAccessChecked"
            show-checkbox
            :highlight-current="true"
            :props="orgTreeProps"
            :load="(node, resolve) => loadNode(node, resolve, isCheck)"
          />
        </div>
      </el-scrollbar>
    </el-card>

    <span slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" :loading="btnLoading" @click="submitData">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import dialogMixin from "mixins/dialogMixin";
import organizeSimpleTreeMixins from "mixins/organizeSimpleTreeMixins";

import { OrganizeSimpleAllTree } from "api/sys/organize";
import { cloneDeep } from "lodash";

export default {
  mixins: [dialogMixin, organizeSimpleTreeMixins],
  props: {
    // 已选中的数据
    dataAccessChecked: {
      type: Array,
      default: () => [],
    },
    // 当前行数据
    currentAppObj: {
      type: Object,
      default: () => ({}),
    },
    // 是否为编辑
    isCheck: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 部门名称
      deptName: "",
      // tree是否为懒加载
      lazyFlag: true,
      // tree数据
      treeData: [],
    };
  },
  methods: {
    /**
     * 初始化
     */
    async initForm() {
      this.wrapperLoading = true;
      await this.$nextTick();
      this.wrapperLoading = false;
    },
    /**
     * 提交数据
     */
    submitData() {
      if (!this.isCheck) {
        const checkNodes = this.$refs.tree.getCheckedNodes();
        this.$emit("success", {
          checkedKeys: this.checkNodesFormat(checkNodes),
        });
      }
      this.close();
    },
    /**
     * 搜索
     */
    async doSearch() {
      try {
        this.wrapperLoading = true;
        if (this.deptName) {
          // 搜索
          const data = await OrganizeSimpleAllTree({
            deptName: this.deptName,
          });
          if (data) {
            const { organizeTree = [] } = data;
            this.treeData = organizeTree;
          }
        } else {
          // 重置
          let data = await this._OrganizeSimpleTree();
          data = this.treeDataFormat({ data, disabledType: false });
          this.treeData = data;
        }
      } catch (e) {
        console.log(e);
      } finally {
        this.wrapperLoading = false;
      }
    },
    checkNodesFormat(arr) {
      const tempArr = this.$createTree({
        list: cloneDeep(arr),
        code: "id",
        parentCode: "parentId",
      });
      return tempArr.map((item) => item.id);
    },
  },
};
</script>

<style lang="scss">
.add-person-dialog {
  .dialog-page-full {
    height: calc(100vh - 260px);
    position: relative;
    .empty-wrapper {
      height: 100%;
      color: #606266;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }
  }
  .el-card__body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 !important;
    .left-top {
      border-bottom: 1px solid #ebeef5;
      padding: 10px;
    }
  }

  .right-wrapper {
    padding: 0 20px;
    font-size: 12px;
    max-height: 100%;
    .right-item {
      border-bottom: 1px solid #ebeef5;
      &:last-child {
        border-bottom: none;
        padding-bottom: 5px;
      }
      &:first-child {
        padding-top: 5px;
      }
    }
  }

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .el-checkbox__label {
    font-size: 12px !important;
    line-height: 18px !important;
  }
  .el-tree-node__label {
    font-size: 12px !important;
    line-height: 18px;
  }
  .data-access-scrollbar {
    height: 100%;
  }
}
</style>
